<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
      #canvas {
          background: #f1f1f1;
      }
  </style>
</head>
<body>
<canvas id="canvas" width="300" height="300"></canvas>
<script>
    window.onload = () => {
        const canvas = document.getElementById('canvas')
        const ctx = canvas.getContext('2d')
        // 绘制矩形
        const drawRect = () => {
            if (canvas.getContext) {
                // 绘制一个矩形 fillRect(x, y, width, height) 距离左边（X轴）x像素，距离上边（Y轴）y像素
                ctx.fillRect(10, 10, 100, 100)

                // 清除指定矩形区域，让清除部分完全透明。 clearRect(x, y, width, height)
                ctx.clearRect(30, 30, 60, 60)

                // 绘制一个矩形的边框 strokeRect(x, y, width, height)
                ctx.strokeRect(40, 40, 40, 40)
            }
        }
        // drawRect()

        // 三角形
        const drawTriangle = () => {
            // 新建一条路径，生成之后，图形绘制命令被指向到路径上生成路径。
            ctx.beginPath()
            // moveTo(x, y) 将笔触移动到指定的坐标x以及y上。 通常会使用moveTo()函数设置起点
            ctx.moveTo(20, 20)

            // 该方法有两个参数：x以及y ，代表坐标系中直线结束的点。开始点和之前的绘制路径有关，之前路径的结束点就是接下来的开始点，等等。。。开始点也可以通过moveTo()函数改变
            ctx.lineTo(100, 20)
            ctx.lineTo(20, 100)

            // 就是闭合路径closePath(),不是必需的。这个方法会通过绘制一条从【当前点到开始点的直线来闭合图形】。如果图形是已经闭合了的，即当前点为开始点，该函数什么也不做。
            //注意：当你调用fill()函数时，所有没有闭合的形状都会自动闭合，所以你不需要调用closePath()函数。但是调用stroke()时不会自动闭合。
            // ctx.closePath()
            //填充三角形
            ctx.fill()

            // 重新绘制新的路径,描边三角形
            ctx.beginPath()
            ctx.moveTo(110, 20)
            ctx.lineTo(110, 100)
            ctx.lineTo(30, 100)
            ctx.closePath()
            ctx.stroke()
        }
        // drawTriangle()

        // 绘制圆形
        const drawCircular = () => {
            ctx.beginPath();
            // arc(x, y, radius, startRad, endRad, anticlockwise)
            // 画一个以（x,y）为圆心的以radius为半径的圆弧（圆），从startRad开始到endRad结束，按照anticlockwise给定的方向（false 为顺时针）来生成
            // startRad/endRad  是弧度，不是角度, 比如：360度=2π rad  180度=π rad
            ctx.arc(150, 150, 100, 0, Math.PI * 2, false); // 顺时针绘制0-360度的完整的圆

            ctx.moveTo(220, 150); // 改变起始点
            ctx.arc(150, 150, 70, 0, Math.PI, false);   // 顺时针绘制0-180度的圆弧

            ctx.moveTo(125, 100); // 改变起始点
            ctx.arc(115, 100, 10, 0, Math.PI * 2, true);  // 左眼 逆时针绘制0-360度的完整的圆

            ctx.moveTo(195, 100); // 改变起始点
            ctx.arc(185, 100, 10, 0, Math.PI * 2, true);  // 右眼 逆时针绘制0-360度的完整的圆
            ctx.stroke();
            // ctx.fill()
        }
        // drawCircular()

        // 二次贝塞尔曲线绘制气泡图案
        const drawQuadratic = ()=>{
            // 二次贝塞尔曲线
            ctx.beginPath();
            ctx.moveTo(75, 25);
            // quadraticCurveTo(cp1x, cp1y, x, y) 绘制二次贝塞尔曲线，cp1x,cp1y为一个控制点，x,y为结束点。
            ctx.quadraticCurveTo(25, 25, 25, 62.5);
            ctx.quadraticCurveTo(25, 100, 50, 100);
            ctx.quadraticCurveTo(50, 120, 30, 125);
            ctx.quadraticCurveTo(60, 120, 65, 100);
            ctx.quadraticCurveTo(125, 100, 125, 62.5);
            ctx.quadraticCurveTo(125, 25, 75, 25);
            ctx.stroke();
        }
        drawQuadratic()
    }

</script>
</body>
</html>
